<template>
	<div class="invoice-main">
        <table-set :tableHeader="tableHeader" @headerSet="headerSet"></table-set>
        <orderStatistics :myInfo ='myInfo' :roleID='roleID' @getData='search'/>
		<!-- 列表查找 -->
        <span class="down-execel">
            <!-- <Icon type="ios-funnel-outline" /><a href="javascript:;">筛选条件</a> -->
            <Poptip v-model="showFilter" placement="bottom-end"  @on-popper-show ='getAllAgent'>
                <!-- <Icon type="ios-funnel-outline" /> -->
                <i class="el-icon-search poptip-condition-add"></i>
                <a href="javascript:;">列表查找</a>
                <!-- <div slot="title"><i></i></div> -->
                <div slot="content">
                    <Poptip v-model="showFilterCondition" placement="bottom-start" class='poptip-condition'>
                        <i class="el-icon-plus poptip-condition-add"></i>
                        <a href="javascript:;" class='poptip-condition-add'>添加过滤条件</a>


                        <div slot="content" class="condition-list">
                            <ul>
                                <li v-for="(item, index) in columns" :key="index" class='poptip-condition-item' @click="addFilterCondition(item)">{{item.label}}</li>
                            </ul>
                        </div>
                    </Poptip>

                    <el-form :model="conditionForm" ref="conditionForm" label-width="120px" class="demo-dynamic" @submit.native.prevent>
                        <el-form-item v-for="(condition, index) in conditionForm.condition" :label="condition.label" :key="condition.key"
                            :prop="'condition.' + index + '.value'" :rules="{
                                    required: true, message: condition.label +'不能为空', trigger: 'blur'
                                }">
                            <el-date-picker
                                v-model="submitTime"
                                type="daterange"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                @input = 'changInput'
                                :validate-event='false'
                                size="small"
                                v-if='condition.label === "提交时间"'>
                            </el-date-picker>

                            <el-select v-else-if='condition.label === "专利类型"' v-model="condition.value" placeholder="请选择专利类型" size="small">
                                <el-option label="发明专利" value="发明专利"></el-option>
                                <el-option label="实用新型" value="实用新型"></el-option>
                                <el-option label="外观设计" value="外观设计"></el-option>
                                <el-option label="不确定" value="不确定"></el-option>
                            </el-select>
                            <el-select
								size="small"
								filterable
								v-model="condition.value"
								v-else-if='condition.label === "代理人"'>
								<el-option
									v-for="item in agentOptions"
									:key="item.id"
									:label="item | agentNumAddName"
									:value="item.id">
								</el-option>
							</el-select>

                            <el-input v-else size="small" v-model="condition.value" @keyup.enter.native="submitsearch('conditionForm')"></el-input>
                            <el-button @click.stop="removeDomain(condition)" size="mini">删除</el-button>
                        </el-form-item>
                        <div class='btns'>
                            <el-button @click="submitsearch('conditionForm')" size="mini">查询</el-button>
                            <el-button @click.stop="resetForm1('conditionForm')" size="mini">重置</el-button>
                        </div>

                    </el-form>
                </div>
            </Poptip>
        </span>

		<el-table
            v-if="table_show"
			:data="tableData"
			border
			style="width: 100%"
			ref="orderTb"
			height="87%"
			@sort-change='tableSortChange'
			v-loading="loading">
			<el-table-column show-overflow-tooltip label="ID" width="60" align="center">
				<template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
			</el-table-column>
            <template v-for="(item, index) in tableHeader">
                <el-table-column :key="index" v-if="item.label == '返修耗时' && item.is_show" show-overflow-tooltip label="返修耗时(天)" width="140" prop="pivot_created_at" align="center" sortable='custom'>
                    <template slot-scope="scope">
                        <span :class="{'unfinish': getAuditorDate(scope.row) > 7}">
                            {{ getAuditorDate(scope.row) }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column :key="index" v-if="item.label == '订单编号' && item.is_show" show-overflow-tooltip prop="order_number" label="订单编号" width="200" align="left" sortable='custom'></el-table-column>
                <el-table-column :key="index" v-if="item.label == '拟申报专利名称' && item.is_show" show-overflow-tooltip prop="patent_name" label="拟申报专利名称" min-width="170" align="left" sortable='custom'></el-table-column>
                <el-table-column :key="index" v-if="item.label == '专利类型' && item.is_show" show-overflow-tooltip prop="type" label="专利类型" min-width="120" align="left" sortable='custom'></el-table-column>
                <el-table-column :key="index" v-if="item.label == '代理人' && item.is_show" show-overflow-tooltip prop="pick_up_date" label="代理人" width="120" align="left" sortable='custom'>
                    <template slot-scope="scope">
                        {{scope.row.agent.name}}
                    </template>
                </el-table-column>
                <el-table-column :key="index" v-if="item.label == '内容审核文件' && item.is_show" prop="review_file" label="内容审核文件" width="200" align="center">
                    <template slot-scope="scope">
                        <div class='flie-hid'>
                            <a v-for="item in scope.row.reviewfileArr" :key="item.id" :href="baseUrl + '/api/download?path=' + item.path"
                            :download="item.path" :title="item.path.split('/')[2]" class="el-icon-tickets file_sh"></a>
                            <!-- {{ scope.row.reviewfileArr}} -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :key="index" v-if="item.label == '流程状态' && item.is_show" show-overflow-tooltip prop="status" label="流程状态" width="120" align="center" sortable='custom'></el-table-column>
                <el-table-column :key="index" v-if="item.label == '修改时间' && item.is_show" show-overflow-tooltip prop="updated_at" label="修改时间" width="180" align="center" sortable='custom'></el-table-column>
            </template>
            <el-table-column show-overflow-tooltip width="120" align="center" label="操作" fixed="right" v-if="checked99">
				<template slot-scope="scope">
                    <el-button
						:class="{'opinions-count': scope.row.noRead > 0}"
						:data-before="scope.row.noRead"
						:disabled="!scope.row.opinions_count"
						size="small"
						@click="showAudito(scope.row, scope.$index)"
						v-no-more-click:3000>
						审核记录
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="审核订单" :visible.sync="dialogFormVisible" @close='showAuditRecord' center>
			<el-form :model="form" :rules="rules" ref="ruleForm">
				<el-form-item label="审核意见" prop="review">
					<el-input type="textarea" :rows="4" placeholder="请输入审核意见" v-model="form.review"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button v-no-more-click:3000 type="primary" @click="submitForm('ruleForm','yes')">通 过</el-button>
				<el-button v-no-more-click:3000 type="danger" @click="submitForm('ruleForm','no')">退 回</el-button>
			</div>
		</el-dialog>

		<!-- 审核记录弹窗 -->
		<el-dialog title="审核记录" :visible.sync="showAuditoRecording" class="lookAuditRecord" center>
			<el-timeline>
				<el-timeline-item v-for="(item, index) in opinions" :key="index" :timestamp="item.created_at">
					<el-card>
						<h4 class="flex-line">
                            <span class="title">审核员：</span>
                            <span class="finish content">{{item.review_user}}</span>
                            <Tooltip content="点我回复" class="fr" v-if="item.agent_message.length > 0">
								<i class="el-icon-chat-dot-round leaveWord ml5" @click="agentAnwser(item)"></i>
							</Tooltip>
                        </h4>
                        <div class="flex-line">
							<span class="title">审核意见：</span>
							<template v-if="item.review.indexOf('&&&') != -1">
								<span class="content">{{ item.review.split('&&&')[0] }}</span>
							</template>
							<span v-else>{{ item.review }}</span>
						</div>
						<div class="flex-line" v-if="item.review.indexOf('&&&') != -1">
							<span class="title">扣款金额：</span>
							<span class="content font_danger">{{item.review.split('&&&')[1].split('###')[0] }}元</span>
						</div>
                        <div class="flex-line" v-if="item.review.indexOf('###') != -1">
							<span class="title">扣款原因：</span>
							<span class="content">{{item.review.split('###')[1] }}</span>
						</div>
                        <div v-for="(agent, index) in item.agent_message" :key="index" class="pl15">
                            <h4 class="flex-line">
                                <span class="title" v-if="agent.review_user.indexOf('&&&') == -1">代理人：</span>
								<span class="title" v-else>审核员：</span>
								<span class="el-blue content" v-if="agent.review_user.indexOf('&&&') == -1">
									{{ agent.review_user }}
									<span class="time">{{agent.created_at}}</span>
								</span>
								<span class="content finish" v-else>
									{{ agent.review_user.split('&&&')[0] }}
									<span class="time">{{agent.created_at}}</span>
								</span>
                            </h4>
                            <div class="flex-line">
                                <span class="title">回复内容：</span>
                                <span class="content">{{agent.review}}</span>
                            </div>
                        </div>
					</el-card>
				</el-timeline-item>
			</el-timeline>
		</el-dialog>

		<!-- 分页 -->
		<el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
		    :page-sizes="pageSizes"
            :page-size="Number(pageSize)"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
		<agent-anwser ref="agent-anwser" @refresh="refreshData"></agent-anwser>
	</div>
</template>
<script>
import {
    getOrderList,
    getOrder,
    delOrder
} from "~/api/order";
import {
    doAuditor
} from "~/api/auditor";
import {
    getOrderAuditorList
} from "~/api/order";
import tableSet from '~/components/tableSet'

import orderFn from "../order/getOrderList";
import orderStatistics from "~/components/orderStatistics"
import agentAnwser from '../order/dialogPage/agent-anwser'
export default {
    components: {
        orderStatistics,
        tableSet,
        agentAnwser
    },
    data() {
        return {
            table_show: true,
            tableHeader: [
                {
                    label: '返修耗时',
                    prop: 'pivot_created_at',
                    is_show: true
                },
                {
                    label: '订单编号',
                    prop: 'order_number',
                    is_show: true
                },
                {
                    label: '专利类型',
                    prop: 'type',
                    is_show: true
                },
                {
                    label: '流程状态',
                    prop: 'status',
                    is_show: true
                },
                {
                    label: '拟申报专利名称',
                    prop: 'patent_name',
                    is_show: true
                },
                {
                    label: '代理人',
                    prop: 'agent.name',
                    is_show: true
                },
                {
                    label: '内容审核文件',
                    prop: 'review_file',
                    is_show: true
                },
                {
                    label: '修改时间',
                    prop: 'updated_at',
                    is_show: true
                }
            ],
            tableSize: 10, //一页几条
            tableStart: 0, //table数组过滤的第一条索引
            tableEnd: 10, //table数组过滤的最后一条索引
            currentPage: 1, //目前在第几页
            pageSizes: [25, 50], //一页可以几条
            loading: false,
            tableData: [],
            isFixed: "right",
            //默认域名
            baseUrl: global.baseurl,
            order: "",
            dialogFormVisible: false,
            form: {},
            rules: {
                review: [{
                    required: true,
                    message: "请输入审批意见",
                    trigger: "blur"
                }]
            },
            total: 0,
            showAuditoRecording: false,
            opinions: [],
            showFilter: false, // 控制显示筛选条件
            showFilterCondition: false,
            conditionForm: {
                condition: []
            }, //筛选条件
            columns: [
                {
                    label: '订单编号',
                    id: 3,
                    parameter: 'order_number'
                },
                {
                    label: '提交时间',
                    id: 10,
                    parameter: 'subimt_time'
                },
                {
                    label: '专利类型',
                    id: 11,
                    parameter: 'type'
                },
                {
                    label: '专利名称',
                    id: 2,
                    parameter: 'patent_name'
                },
                {
                    label: '代理人',
                    id: 3,
                    parameter: 'agent_id'
                },
            ],
            searchValue: '',
            submitTime: [],
            agentOptions: [],
            paramsByOrder: {
                auditor_id: this.$store.state.user.id,
                status: '案件修改中',
                sort_str: 'pivot_created_at',
                sort_order: 'asc'
            },
			myInfo: {
                modify_total: 0,
                modify_total_message: 0
            },
            roleID: '',
            checked99: true
        };
    },
    async asyncData({
        $axios,
        store
    }) {
        let params = {
            sort_str: 'pivot_created_at',
            sort_order: 'asc'
        }
        return orderFn.getOrderRepair($axios, store, params)

    },
    created () {
        // this.myInfo.waitRepair = this.total
		// this.roleID = this.$store.state.user.id
    },
    methods: {
        refreshData() {
            this.showAuditoRecording = false
            this.changeData()
        },
        agentAnwser(data) {
            this.$refs['agent-anwser'].showOn(data, 'auditor')
        },
        headerSet(data) {
            this.table_show = false
            this.tableHeader = data
            this.$nextTick(() => {
                this.table_show = true
            })
            if(data.every(v => v.is_show == false)) {
                this.checked99 = false
            }
            if (data.some(v => v.is_show == true)) {
                this.checked99 = true
            }
        },
        auditorOrder(val) {
            this.dialogFormVisible = true;
            this.order = val.id;
        },

        //确认通过 / 未通过
        submitForm(formName, pass) {
            let that = this
            that.$refs[formName].validate(valid => {
                if (valid) {
                    let obj = {
                        order: that.order,
                        auditor: that.$store.state.user.id,
                        pass: pass,
                        review: that.form.review
                    };
                    doAuditor(that.$axios, obj)
                        .then(({
                            data
                        }) => {
                            if (data.status == "success") {
                                that.$message.success("操作成功");
                                that.dialogFormVisible = false;
                                this.changeData()
                            } else {
                                that.$message.error(data.message);
                            }

                        })
                        .catch(err => {
                            that.$message.error(err);
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        // 刷新数据
        async changeData() {
            let data = await orderFn.getOrderRepair(this.$axios, this.$store)
            for (let key in data) {
                this[key] = data[key];
            }
        },

        //选择一页几条
        handleSizeChange(size) {
            this.paramsByOrder.perPage = size
            this.paramsByOrder.page = 1
            getOrderAuditorList(this.$axios, this.paramsByOrder)
            .then(res=>{
                if(res.data.code== 200){
                    this.tableData = res.data.data;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.splitFiles(this.tableData[i])
                    }
                }
            })
        },
        //选择第几页
        handleCurrentChange(val) {
            // let parms = this.paramsByOrder
            this.paramsByOrder.page = val
            getOrderAuditorList(this.$axios, this.paramsByOrder)
            .then(res=>{
                if(res.data.code==200){
                    this.tableData = res.data.data;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.splitFiles(this.tableData[i])
                    }
                }
            })
        },
        getAllAgent() {
            this.$axios.get('api/user/agent')
                .then(res => {
                    if (res.data.code == 200) {
                        this.agentOptions = res.data.data
                    }
                })
                .catch(err => {
                    this.$message({
                        type: "err",
                        message: err
                    });
                });

        },
        showAudito(data, index) {
            this.showAuditoRecording = true;
            this.opinions = data.opinions;
            if (data.noRead > 0) {
                this.readAuditor(data.opinions, index)
            }
        },
        readAuditor(data, index) {
            let ids = []
            data.forEach(v => {
                ids.push(v.id)
            });
            this.$axios.put('/api/opinion/update_read_status', {
                ids: ids
            }).then(res => {
                if (res.data.code == 200) {
                    this.tableData[index].noRead = 0
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        },
        showAuditRecord() {
            this.form = {}
        },
        getAuditorDate(itemData) {
            if (!itemData.pivot_created_at) {
                return '暂无耗时'
            }
            let createDay = itemData.pivot_created_at;
            //获取接单的时间戳
            createDay = createDay.replace(/-/g, "/");
            var createTime = new Date(createDay).getTime();
            //获取当前的时间戳
            var nowTime = new Date().getTime();
            //获取处理时间戳
            let cha = nowTime - createTime;
            //转换天数
            let round2 = (cha / 1000 / 60 / 60 / 24).toFixed(2)
            let	processingTime = (Math.ceil(round2 * 10) / 10).toFixed(1)
            if (processingTime < 0) {
                return '0.0'
            }  else if (processingTime < 0.1) {
                return '0.1'
            } else {
                return processingTime;
            }
        },
        search(args) {
            this.currentPage = 1
            this.paramsByOrder = {
                auditor_id: this.$store.state.user.id,
                status: '案件修改中'
            }
            if(args) {
                this.paramsByOrder = {...this.paramsByOrder, ...args}
            }
            for (var i = 0; i < this.conditionForm.condition.length; i++) {
                let a = this.conditionForm.condition[i].parameter
                if (this.conditionForm.condition[i].parameter === 'subimt_time') {
                    this.paramsByOrder.start_time = this.submitTime[0]
                    this.paramsByOrder.end_time = this.submitTime[1]
                }
                this.paramsByOrder[a] = this.conditionForm.condition[i].value
            }

            // 处理分页数据
            delete this.paramsByOrder.page

            // 处理排序状态
            delete this.paramsByOrder.sort_str
            delete this.paramsByOrder.sort_order
            this.$refs['orderTb'].clearSort()

            this.loading = true
            getOrderAuditorList(this.$axios, this.paramsByOrder)
            .then(res=>{
                if(res.data.code==200){
                    this.loading = false
                    this.tableData = res.data.data;
                    this.pageSize = res.data.page.per_page;
                    this.tableSize = res.data.page.per_page;
                    this.tableEnd = res.data.page.per_page;
                    this.total = res.data.page.total;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.splitFiles(this.tableData[i])
                    }
                }
            })
        },
        // 添加条件筛选
        addFilterCondition(item) {
            let filterItem = {
                value: '',
                label: item.label,
                parameter: item.parameter,
                key: Date.now()
            }

            if (this.conditionForm.condition.length > 0) {
                let conditionlabels = []
                for (let i = 0; i < this.conditionForm.condition.length; i++) {
                    conditionlabels.push(this.conditionForm.condition[i].label)
                }
                let Check = conditionlabels.indexOf(item.label)
                Check == -1 ? this.conditionForm.condition.push(filterItem) : this.$message.error('请勿重复添加')
            } else {
                this.conditionForm.condition.push(filterItem)
            }

            this.showFilterCondition = false;
        },
        resetForm1(formName) {
            this.$refs[formName].resetFields()
            this.$refs['orderTb'].clearSort()
            this.conditionForm.condition.forEach(v => {
                if (v.value) {
                    v.value = null
                }
            });
            this.submitTime = []
            this.paramsByOrder = {
                status: '案件修改中',
                auditor_id: this.$store.state.user.id
            }
            this.$nextTick(() => {
                this.$refs[formName].clearValidate()
            })
            // getOrderAuditorList(this.$axios, this.paramsByOrder)
            // .then(res=>{
            //     if(res.data.code==200){
            //         this.loading = false
            //         this.tableData = res.data.data;
            //         this.pageSize = res.data.page.per_page;
            //         this.tableSize = res.data.page.per_page;
            //         this.tableEnd = res.data.page.per_page;
            //         this.total = res.data.page.total;
            //         for (let i = 0; i < this.tableData.length; i++) {
            //             this.splitFiles(this.tableData[i])
            //         }
            //     }
            // })
            // this.showFilterCondition = false
            // this.showFilter = false
        },
        submitsearch(formName) {
            let that = this
            this.$refs[formName].validate((valid, prop) => {
                let props = []
                for (let k in prop) {
                    props.push(prop[k][0].field)
                    if (prop[k][0].message = '提交时间不能为空') {
                        if (that.submitTime) {
                            if(	that.submitTime.length > 0	) {
                                that.$refs[formName].clearValidate([prop[k][0].field])
                                let timeIndex = props.indexOf('提交时间不能为空')
                                props.splice(timeIndex, 1)
                            }
                        } else {
                            return false
                        }
                    }
                }
                if (props.length) {
                    that.$refs[formName].validateField(props, (valid2) => {
                        if(valid2) {
                            return false;
                        } else {
            this.showFilter = false
                            that.search()
                        }
                    })
                } else {
            this.showFilter = false
                    that.search()
                }
            })
        },
        removeDomain(item) {
            this.showFilter = true
            let index = this.conditionForm.condition.indexOf(item)
            if (index !== -1) {
                this.conditionForm.condition.splice(index, 1)
            }
            if (item.label === '提交时间') {
                this.submitTime = []
            }
            this.search()
        },
        changInput () {
            this.$refs['conditionForm'].clearValidate();
        },
        // 表格排序
        tableSortChange(column) {
            if (column.order === 'descending') {
                this.paramsByOrder.sort_str = column.prop
                this.paramsByOrder.sort_order = 'desc'
            } else if (column.order === 'ascending'){
                this.paramsByOrder.sort_str = column.prop
                this.paramsByOrder.sort_order = 'asc'
            } else {
                delete this.paramsByOrder.sort_str
                delete this.paramsByOrder.sort_order
            }
            this.loading = true
            getOrderAuditorList(this.$axios, this.paramsByOrder)
            .then(res=>{
                if(res.data.code==200){
                    this.loading = false
                    this.tableData = res.data.data;
                    this.pageSize = res.data.page.per_page;
                    this.tableSize = res.data.page.per_page;
                    this.tableEnd = res.data.page.per_page;
                    this.total = res.data.page.total;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.splitFiles(this.tableData[i])
                    }
                }
            })
        },
        splitFiles (pData) {
            if (pData.review_file == null || pData.review_file == "") {} else {
                pData.reviewfileArr = [];
                let reviewfile = pData.review_file.split("&");
                for (var j in reviewfile) {
                    let itemobj = {
                        id: j + 1,
                        path: reviewfile[j],
                        file: ''
                    };
                    pData.reviewfileArr.push(itemobj);
                }
            }
            //已完成文件 切分组件
            if (pData.fish_file == null || pData.fish_file == "") {} else {
                pData.fishfileArr = [];
                let fishfile_Arr = pData.fish_file.split("&");
                for (var f in fishfile_Arr) {
                    let itemobj = {
                        id: f + 1,
                        path: fishfile_Arr[f],
                        file: ''
                    };
                    let itemArr = itemobj.path.split("/")
                    itemobj.path = itemArr[itemArr.length - 1]
                    itemobj.file = itemArr.slice(0, 2).join("/");
                    pData.fishfileArr.push(itemobj);
                }
            }
        }
    }
};
</script>
<style lang="less">
.invoice-main {
  height: 100%; //撑满表格
  #IMTable {
    height: 70%; //撑满表格
	}
}
	.file_sh {
		font-size: 25px;
		margin-right: 10px;
	}

	.lookAuditRecord {
		ul {
			list-style: none;
			padding: 0 0 30px 0;

			li {
				// height: 30px;
				line-height: 30px;
			}

			.AuditDetails {
				margin-left: 30px;
			}
		}
	}

	.tableLastCol1 {
		padding-left: 50px;
	}
	.down-execel {
		display: inline-block;
		height: 40px;
		line-height: 40px;
		color: #333333;
		font-size: 14px;
		// float: right;
		margin-right: 20px;
	}
		.el-main .ivu-poptip .ivu-poptip-popper .ivu-poptip-content .ivu-poptip-inner {
		min-width: 480px;
		// height: 300px;
		overflow-y: scroll;
	}

	.poptip-condition {
		display: block;
		margin-top: 10px;

		.poptip-condition-item {
			line-height: 25px;
			cursor: pointer;
		}

		.poptip-condition-add {
			font-size: 14px;
		}
	}

	.demo-dynamic {
		padding-left: 10px;

		.el-form-item {
			margin-bottom: 12px;
		}

		.el-input {
			width: 240px;
		}

		.el-date-editor {
			width: 240px;
		}

		.el-button {
			padding: 9px 15px;
			vertical-align: baseline;
		}

		.el-form-item__error {
			padding-top: 0;
		}

	}

	.el-main .poptip-condition .ivu-poptip-popper .ivu-poptip-content .ivu-poptip-inner {
		min-width: 180px;
    }
    .flex-line {
        display: flex;
        .title {
            text-align: justify;
            text-align-last: justify;
            flex: 0 0 80px;
        }
        .content {
            flex: 1;
            .time {
				float: right;
				margin-left: 20px;
				color: #909399;
				font-weight: normal;
				font-size: 14px;
			}
        }
    }

</style>
